<template>
    <div class="asideContianer">
        <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group> -->
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            :collapse="isCollapse" background-color="rgb(50,65,87)" text-color="#fff" active-text-color="#ffd04b">
            <h3>{{ isCollapse?'管理':'管理系统' }}</h3>
            <!-- <el-menu-item v-for=" item in noHashChildren" :key="item.name" :index="item.name" @click="clickMenu(item)">
                <i :class="`el-icon-${item.icon}`"></i>
                <span slot="title">{{ item.label }}</span>
            </el-menu-item>
            <el-submenu v-for=" item in hashChildren" :key="item.name" :index="item.name">
                <template slot="title">
                    <i :class="`el-icon-${item.icon}`"></i>
                    <span slot="title">{{ item.label }}</span>
                </template>
                <el-menu-item-group v-for="subItem in item.children" :key="subItem.name">
                    <el-menu-item :index="subItem.name" @click="clickMenu(subItem)">{{ subItem.label }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu> -->
            <el-submenu v-for=" item in menuData" :key="item.name" :index="item.name">
                <template slot="title">
                    <i :class="`el-icon-${item.icon}`"></i>
                    <span slot="title">{{ item.label }}</span>
                </template>
                <el-menu-item-group v-for="subItem in item.children" :key="subItem.name">
                    <el-menu-item :index="subItem.name" @click="clickMenu(subItem)">{{ subItem.label }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>

    </div>
</template>

<script>
export default {
    name: 'Aside',
    data() {
        return {
            // isCollapse: false,
            menuData: [
                // {
                //     path: '/',
                //     name: 'main',
                //     label: '首页',
                //     icon: 's-home',
                //     url: 'Home/Home'
                // },
                // {
                //     label: '系统管理',
                //     icon: 'user',
                //     name: 'system',
                //     children: [
                //         {
                //             path: '/SysUser',
                //             name: 'sysUser',
                //             label: '用户管理',
                //             icon: 'setting',
                //             url: 'sys/sysUser'
                //         },
                //         {
                //             path: '/SysRole',
                //             name: 'sysRole',
                //             label: '角色管理',
                //             icon: 'setting',
                //             url: 'sys/sysRole'
                //         },
                //         {
                //             path: '/SysMenu',
                //             name: 'sysMenu',
                //             label: '菜单管理',
                //             icon: 'setting',
                //             url: 'sys/sysMenu'
                //         },
                //         {
                //             path: '/SysLog',
                //             name: 'sysLog',
                //             label: '系统日志',
                //             icon: 'setting',
                //             url: 'sys/sysLog'
                //         }
                        
                //     ]
                // },
                // {
                //     label: '订单管理',
                //     icon: 's-order',
                //     name: 'order',
                //     children: [
                //         {
                //             path: '/AllOrder',
                //             name: 'allOrder',
                //             label: '全部订单',
                //             icon: 'setting',
                //             url: 'order/allOrder'
                //         },
                //         {
                //             path: '/MyOrder',
                //             name: 'myOrder',
                //             label: '我的订单',
                //             icon: 'setting',
                //             url: 'order/myOrder'
                //         }
                //     ]
                // }
            ]
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            // console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        },clickMenu(item){
            // debugger;    
            console.log(item.path)
            if(this.$route.path !=item.path && !(this.$route.path === '/FirstPage' && item.path ==='/')){
                this.$router.push(item.path)
            }
            //出发面包屑数据的更新
            this.$store.commit('menuChange', item)
        },getDataList() {
            this.$http.get("/sys/sysMenu/getList").then((res) => {
                this.menuData = res.data.data;
            })
        }
    }, computed: {
        // hashChildren() {
        //     // 过滤获取所有有二级菜单的数据
        //     return this.menuData.filter(item => item.children)
        // }, noHashChildren() {
        //     // 过滤获取所有只有一级菜单的数据
        //     console.log(this.menuData)
        //     return this.menuData.filter(item => !item.children)
        // }, 
        isCollapse(){
            // console.log(this.$store.state.tab.isCollapse)
            return this.$store.state.tab.isCollapse
        }
    }, mounted() {
        this.getDataList();
    }
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
} 
.el-menu {
    height: 100vh;
    border-right: none;
    h3 {
        color: #fff;
        text-align: center;
        line-height: 48px;
        font-size: 22px;
        font-weight: 400;
        padding: 0 20px;
    }
}
</style>